<template>
    <div>
        <div class="container">
            <h1>快递出库</h1>
            <el-divider></el-divider>
            <el-button type="primary" style="margin-left: 90%; margin-bottom: 10px" @click="export_all" icon="el-icon-phone"
                >一键出库</el-button
            >
            <el-table
                :data="importInfo.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                @selection-change="handleSelectionChange"
                @select="handleSelection"
                highlight-current-row
                v-loading="loading"
                style="width: 100%"
                stripe
            >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="序号" type="index" width="50"> </el-table-column>
                <el-table-column label="快递单号" prop="express_id"> </el-table-column>
                <el-table-column label="取货码" prop="take_code">
                    <template slot-scope="scope">
                        <el-tag type="primary" effect="plain"> {{ scope.row.take_code }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="入库时间" sortable="" prop="import_time"> </el-table-column>
                <el-table-column label="状态" prop="state">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.state === 1" type="success">在库</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="export_confirm(scope.row)" type="text" size="small">出库</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 30, 45, 60, 75]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="length"
                style="margin-left: 35%; margin-top: 20px"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    // vue名字
    name: 'Export',
    // 数据
    data() {
        return {
            // disabled_confirm: true,
            loading: false,
            exportForm: {
                express_id: '',
                take_code: '',
                import_time: ''
            },

            //分页
            currentPage: 1,
            pageSize: 10,
            length: 0,
            importInfo: [],
            exports: []
        };
    },
    // 方法
    methods: {
        export_all() {
            if (this.exports != null && this.exports.length != 0) {
                this.loading = true;
                const _this = this;
                this.$axios({
                    method: 'POST',
                    url: 'export/exportManyOneTime',
                    data: JSON.stringify(this.exports),
                    headers: { 'Content-Type': 'application/json' } //加上这个
                })
                    .then(function (res) {
                        console.log(res);
                        if (res.data.code == 1) {
                            _this.loading = false;
                            _this.$notify({
                                title: '成功',
                                message: '出库成功！',
                                type: 'success'
                            });
                        } else {
                            _this.loading = false;
                            _this.$notify.error({
                                title: '错误',
                                message: '出库失败！'
                            });
                        }
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            } else {
                this.$notify.info({
                    title: '提示信息',
                    message: '您还没有选择出库包裹！'
                });
            }
        },

        //表格多选
        handleSelectionChange(val) {
            console.log(val);
            this.exports = val;
        },

        //出库确认
        export_confirm(row) {
            console.log(this.exportForm);
            let param = new URLSearchParams();
            param.append('express_id', row.express_id);
            const _this = this;
            this.$confirm('是否将该快件出库？', '确认信息', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            })
                .then(() => {
                    this.loading = true;
                    this.$axios({
                        method: 'POST',
                        url: 'export/add',
                        data: param,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                    })
                        .then(function (res) {
                            console.log(res);
                            if (res.data.code == 1) {
                                _this.loading = false;
                                _this.$message.success('出库成功！');
                                _this.$router.go(0);
                            } else {
                                _this.$message.err('出库失败');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                })
                .catch((action) => {
                    this.$message({
                        type: 'info',
                        message: action === 'cancel' ? '取消操作' : '停留在当前页面'
                    });
                });
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        },

        index_info() {
            const _this = this;
            this.$axios({
                method: 'POST',
                url: 'import/findImport',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.importInfo = res.data.result;
                        _this.length = res.data.result.length;
                    } else {
                        _this.$message.err('暂无出库信息！');
                        // _this.$message.
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        }
    },

    // 页面初始化生命周期函数
    created() {
        this.index_info();
    }
};
</script>
// 样式
<style scoped>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.handle-box {
    margin-bottom: 20px;
}
</style>